<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb mt-3">
        <strong>当前位置:</strong>
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none link-dark">管理中心</a></li>
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none link-dark">权限管理</a></li>
        <li class="breadcrumb-item active" aria-current="page">权限列表</li>
    </ol>
</nav>

<!-- 新增权限 -->
<div class="modal fade" id="modal-insert-perm" tabindex="-1" aria-labelledby="modal-base-h5" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-insert-h5">新增权限</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="form-insert" class="row g-3">
                    <div class="col-md-12">
                        <label for="insert-code" class="form-label ">权限名称</label>
                        <input required name="name" type="text" class="form-control" id="insert-code" placeholder="请输入权限名称">
                    </div>

                    <div class="col-md-12">
                        <label for="insert-perm-url" class="form-label">权限地址</label>
                        <input required name="url" type="text" class="form-control" id="insert-perm-url" placeholder="请输入权限地址">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button id="modal-insert-sure" type="button" class="btn btn-primary" onclick="insertPerm('#form-insert')">新增</button>
            </div>
        </div>
    </div>
</div>
<!-- 编辑权限 -->
<div class="modal fade" id="modal-edit-perm" tabindex="-1" aria-labelledby="modal-base-h5" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-edit-h5">新增权限</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="form-edit" class="row g-3">
                    <div class="col-md-12">
                        <label for="insert-code" class="form-label ">权限ID</label>
                        <input readonly name="id" type="text" class="form-control is-valid" id="edit-id" placeholder="请输入权限名称">
                        <div class="valid-feedback">
                            提示: 权限ID不可更改
                        </div>
                    </div>

                    <div class="col-md-12">
                        <label for="insert-code" class="form-label ">权限名称</label>
                        <input required name="name" type="text" class="form-control" id="edit-code" placeholder="请输入权限名称">
                    </div>

                    <div class="col-md-12">
                        <label for="insert-perm-url" class="form-label">权限地址</label>
                        <input required name="url" type="text" class="form-control" id="edit-perm-url" placeholder="请输入权限地址">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button id="modal-edit-sure" type="button" class="btn btn-primary" onclick="savePerm('#form-edit')">保存</button>
            </div>
        </div>
    </div>
</div>

<!--动态渲染加载图标-->
<div id="admin-user-center-placeholder" class="row d-flex justify-content-center"></div>

<div class="container col-md-10">
    <!-- 搜索框开始 -->
    <div class="input-group mb-3 w-75">
        <select class="form-select">
            <option value="permId">权限ID</option>
            <option value="permName">权限名称</option>
            <option value="permUrl">权限地址</option>
        </select>
        <input id="input-search-role" type="text" class="form-control" placeholder="输入搜索的条件"
               aria-describedby="btn-search-role">
        <button class="btn btn-primary" type="button" onclick="searchUserPerm(this)">搜索</button>
        <button class="btn btn-secondary" type="button" onclick="clearURL(this)">清空筛选条件</button>
    </div>
    <!-- 搜索框结束 -->
    <!--批量操作按钮-->
    <div style="text-align: right">
        <button class="btn btn-primary ml-auto" onclick="renderModalInsertRole()" data-bs-toggle="modal" data-bs-target="#modal-insert-perm">新增权限</button>
        <button class="btn btn-danger ml-auto" onclick="removePerms()">批量删除权限</button>
    </div>
    <h6 id="textShowResult" class="text-dark">共0条结果</h6>
    <table class="table table-bordered text-center">
        <thead class="table-light">
        <tr>
            <td style="width: 5%"><input id="cb_all" type="checkbox" style="width: 20px; height: 20px">全选</td>
            <td style="width: 5%;">权限ID</td>
            <td style="width: 6%;">权限名称</td>
            <td style="width: 6%;">权限地址</td>
            <td style="width: 15%;">操作</td>
        </tr>
        </thead>
        <tbody id="admin-card-perm-list-entry">
        </tbody>
    </table>
</div>

<!-- 结果通过动态渲染-->
<nav id="admin-card-perm-pages-entry" class="Page navigation mb-0"></nav>